<template>
	<view class="container">
		<uni-section titleFontSize="18px" title="投票主题" sub-title="进行中" type="circle">
			<uni-list>
				<uni-list-item title="发起人" :note="this.voteDetails.manager.name" rightText="右侧文字" />
				<uni-list-item title="开始时间" :note="this.voteDetails.startTime" rightText="右侧文字" />
				<uni-list-item title="截止时间" :note="this.voteDetails.endTime" rightText="右侧文字" />
				<uni-list-item title="投票类型" note="单选" v-if="this.voteDetails.radio==0" rightText="右侧文字" />
				<uni-list-item title="投票类型" note="多选" v-if="this.voteDetails.radio==1" rightText="右侧文字" />
				<uni-list-item title="投票说明" :note="this.voteDetails.content" rightText="右侧文字" />
			</uni-list>	
		</uni-section>
		<uni-section titleFontSize="18px" title="选项" type="circle">
			<uni-card>
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="voteForm" :modelValue="voteDetails">
					<view class="uni-px-5 uni-pb-5" v-if="this.voteDetails.radio==0">
						<view class="text">单选选中：{{JSON.stringify(radioed)}}</view>
						<uni-data-checkbox mode="list" 
						:multiple="false" 
						v-model="radioed" 
						:localdata="this.voteOption" 
						:map="customData"></uni-data-checkbox>
					</view>
					<view class="uni-px-5 uni-pb-5" v-if="this.voteDetails.radio==1">
						<view class="text">多选选中：{{JSON.stringify(checkbox)}}</view>
						<uni-data-checkbox mode="list" 
						:multiple="true" 
						v-model="checkbox" 
						:localdata="this.voteOption" 
						:map="customData"></uni-data-checkbox>
					</view>
				</uni-forms>	
			</uni-card>
		</uni-section>
		<button type="primary" @click="submit('voteForm')">提交</button>	
	</view>
</template>



<script>
	export default {
		data() {
			return {
				id:0,
				radio:0,
				studentId:0,
				// 基础表单数据
				voteDetails: {
					id:0,
					klassId:0,
					title:'',
					content:'',
					endTime:'',
					startTime:'',
					manager:{},
					radio:'',
					senderId:'',
					status:'',
					voteOption:[],
					voteNum:0
				},
				radioed: 0,
				checkbox: [0],
				// 选项数据源
				voteOption:[],
				customData:{
					text:"text",
					value:"id"
				}
			}
		},
		onLoad(e) {
			this.id=e.id
			this.radio=e.radio
			this.studentId=localStorage.getItem("studentId")
			this.getVoteDetails(this.id)
		},
		onReady() {
		},
		methods: {
			getVoteDetails(id){
				this.$myReq({
					url: `/vote/api/getDetails/` + id,
					method: 'get'
				})
				.then((res) => {
					this.voteDetails = res.data
					this.voteOption = res.data.voteOption
					console.log(this.voteOption)
				})
				.catch((err) => {
					console.log(err)
				})
				
			},
			submit(ref) {
				console.log("checkbox"+this.checkbox)
				let votingVo={}
				if(this.radio==0){
					votingVo={
						studentId:this.studentId,
						voteId:this.id,
						optionsId:[this.radioed]
					}
				}else if(this.radio==1){
					votingVo={
						studentId:this.studentId,
						voteId:this.id,
						optionsId:this.checkbox
					}
				}else{
					uni.showToast({
						title: "数据异常",
						icon: "none"
					});
				}
				console.log(votingVo)
				this.$myReq({
					url: `/vote/api/voting`,
					method: 'put',
					data:votingVo
				})
				.then((res) => {
					uni.showToast({
						title: "投票成功",
						icon: "success"
					});
					uni.reLaunch({
						url: '/pages/vote/hasVoteDetails?id='+this.id+"&radio="+this.radio
					});
				})
				.catch((err) => {
					console.log(err)
				})
			},
		}
	}
</script>



<style lang="scss">

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
